<template>
    <el-tabs type="border-card" @tab-click="clickTab">
        <el-tab-pane label="审核中">
            <examining ref="examiningChildRef" />
        </el-tab-pane>
        <el-tab-pane label="审核失败">
            <examineFail ref="examineFailChildRef" />
        </el-tab-pane>
        <el-tab-pane label="上线中">
            <effective ref="effectiveChildRef" />
        </el-tab-pane>
        <el-tab-pane label="已下线">
            <offline ref="offlineChildRef" />
        </el-tab-pane>
    </el-tabs>
</template>

<script lang="ts" setup>
import examining from './examining.vue';
import examineFail from "./examineFail.vue";
import effective from './effective.vue';
import offline from './offline.vue';
import { TabsPaneContext } from 'element-plus';
import { ref } from 'vue';


// 二：定义与 ref 同名变量
const examiningChildRef = ref<any>()
const examineFailChildRef = ref<any>()
const effectiveChildRef = ref<any>()
const offlineChildRef = ref<any>()

const clickTab = (pane: TabsPaneContext, ev: Event) => {
    console.log("被点击的tab为：" + pane.props.label)
    if(pane.props.label==='审核中'){
        examiningChildRef.value.getDataList()
    }else if(pane.props.label==='审核失败'){
        examineFailChildRef.value.getDataList()
    }
    else if(pane.props.label==='上线中'){
        effectiveChildRef.value.getDataList()
    }else{
        offlineChildRef.value.getDataList()
    }
}
</script>